/**
 * 在无头浏览器中将一个网页截图保存为图片
 * 运行方式：node **.js
 */

const targetUrl = 'http://www.baidu.com'; // 截图地址
const targetImgSavePath = './test.png'; // 截图保存地址
const viewSize = { // 视窗大小
    width: 1366,
    height: 768
}

const startCaptureFlag = null; // 开始截图的页面标志，为某个类或者id选择器
const targetElementClassOrId = null; // 要截的元素的id或者类名，如果为空，自动转为整个页面截图

const puppeteer = require('puppeteer');

const saveScreenshot = async(url, path) => {
    // 启动浏览器
    const browser = await puppeteer.launch({
        headless: true // 是否开启无头模式，无头表示不打开模拟浏览器
    });
    // 打开页面
    const page = await browser.newPage();

    // 设置浏览器视窗
    page.setViewport(viewSize);

    page.on('console', msg => console.log('PAGE LOG:', ...msg.args)); // 打印客户端的日志

    // 地址栏输入网页地址
    await page.goto(url);

    // await page.waitFor(2000);
    if (startCaptureFlag) {
        await page.waitForSelector(startCaptureFlag); // 等待某个标志好了
    }

    const htmlHandle = await page.$(targetElementClassOrId); // 截取某个元素

    if (htmlHandle) {
        await htmlHandle.screenshot({
            path
        });
    } else {
        await page.screenshot({
            path
        });
    }

    // 关闭浏览器
    await browser.close();
};

module.exports = saveScreenshot;

if (require.main === module) {
    saveScreenshot(targetUrl, targetImgSavePath);
}